<template>
  <div class="nav">
    <div class="warpper">
      <div class="nav-box">
        <div class="nav-content" @click="fun()" v-for="(v, i) in arr" :key="i">
          <img :src= v.imgurl />
          <p>{{ v.title }}</p>
        </div>
       
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        { title: "下载/本地", imgurl:"./img/imgbox1.png"},
        { title: "云盘", imgurl:"./img/imgbox2.png" },
        { title: "已购",imgurl:"./img/imgbox3.png"},
        { title: "最近播放",imgurl:"./img/imgbox4.png" },
        { title: "我的好友", imgurl:"./img/imgbox5.png"},
        { title: "收藏和赞",imgurl:"./img/imgbox6.png"},
        { title: "我的播客", imgurl:"./img/imgbox7.png"},
        { title: "音乐应用", imgurl:"./img/imgbox8.png"},
      ],
    };
  },
  methods: {
    fun() {
      this.$router.push("/danqus");
    },
  },
};
</script>

<style lang="less" scoped>
.nav {
  margin-top: 0.18rem;
  width: 100%;
}
.warpper {
  width: 6.85rem;
  margin: 0 auto;
}
.nav-box {
  width: 100%;
  height: 3.32rem;
  background-color: white;
  border-radius: 0.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.nav-content {
  padding: 0.29rem;
  width: 1.66rem;
  height: 1.66rem;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.nav-content > img {
  height: 0.58rem;
  width: 00.58rem;
  color: pink;
}
p {
  font-size: 0.23rem;
}
</style>